<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>页面编辑</title>
	<script type="text/javascript" src="../../../js/boot.js"></script>
	<script type="text/javascript" src="./widget.js"></script>
</head>

<body>

	<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
		<div title="页面控件" region="west" width="160" showSplitIcon="true">
			<div class="mini-fit">
				<ul id="widgetTree" class="mini-tree" style="width: 100%;" showTreeIcon="true" allowDrag="true" allowDrop="true" textField="label" idField="id"
					resultAsTree="false" allowDrag="true">
				</ul>
			</div>
		</div>

		<div title="center" region="center">
			<div id="editTabs" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" bodyStyle="padding:0;border:0;">
				<div title="视图" style="width:100%;height:100%;">
					<fieldset style="width: 99%; height: 99%;">
						<iframe id="content-view" align="center" width="100%" height="96%" frameborder="no" border="0" marginwidth="0" marginheight="0"
							scrolling="no"></iframe>
					</fieldset>
				</div>
				<div title="代码">
					<iframe id="content-code" src='source_code.html' align="center" width="100%" height="96%" frameborder="no" border="0" marginwidth="0"
						marginheight="0" scrolling="no"></iframe>
				</div>
			</div>
		</div>

		<div title="控件属性" region="east" width="200" showSplitIcon="true">
			<div class="mini-splitter" vertical="true" style="width: 100%; height: 100%;">
				<div size="240" showCollapseButton="true">
					<fieldset style="width: 98%;height: 100%;">
						<legend>
							<span>页面结构</span>
						</legend>
					</fieldset>
				</div>
				<div showCollapseButton="true">
					<div class="mini-fit">
						<fieldset style="width: 98%;height: 100%;">
							<legend>
								<span>控件属性</span>
							</legend>
							<ul id="pageTree2" class="mini-tree" style="width: 100%;" showTreeIcon="true" allowDrag="true" allowDrop="true" textField="label"
								idField="menuID" resultAsTree="false">
							</ul>
						</fieldset>

					</div>
				</div>
			</div>

		</div>
	</div>

</body>

<script type="text/javascript">
	miniInit();

	// 设置html文件路径
	var editUrl = null;
	function setBody(url) {
		// debugger
		editUrl = ctx + url;
		url = editUrl + "?d=" + (new Date()).getTime();
		$("#content-view").attr('src', url);
		$("#content-code").attr('src', "source_code.html?d=" + (new Date()).getTime());
	}

	/*********************************************************
	 * 左侧页面控件树
	 *********************************************************/
	var widgetTree = mini.get("widgetTree");
	widgetTree.setData(WIDGET.list);
	var editNode = null; // 当前编辑的节点
	widgetTree.on("nodedblclick", function (e) {
		editNode = e.node;
	});

	// 屏蔽右键快捷菜单
	document.oncontextmenu = function stop() {
		return false;
	}

	// 右键取消选中组件
	document.onmousedown = function click() {
		if (event.button == 2) {
			editNode = null;
			widgetTree.selectNode(editNode);
		}
	}

	// 页签切换事件
	var editTabs = mini.get("editTabs");
	editTabs.on("activechanged", function (sender) {
		var index = sender.index;
		if (index == 0) {
			// 重新加载视图页面
			// $("#content-view").attr('src', editUrl + '?d=' + (new Date()).getTime());
		} else {
			// 重新加载源代码页面
			// $("#content-code").attr('src', ctx + '/admin/code/source_code.html?d=' + (new Date()).getTime());
			var win = $("#content-code")[0].contentWindow;
			win.updateCodeArea();
		}
	});

	// 获取源代码
	function getHtmlCode() {
		var viewFrame = $("#content-view")[0];
		var win = viewFrame.contentWindow;
		var doc = win.document;
		var html = doc.documentElement; // 获取dom
		// var code = html.innerHTML; // 获取源代码
		// debugger
		return html;
	}
</script>

</html>